<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="../js/vue.min.js"></script>
	</head>
	<body> 
<!--1.使用范围: 全局组件使用范围:可以在页面中任何位置使用 
局部组件使用范围:只能在定义它的el中使用,不能再其他位置使用,
否则就无法生效
2.定义组件的方法: 全局组件:可以使用Vue.component(tagName,options)定义全局组件-->

    <section id="app">
        <my-component-a></my-component-a>
        <my-component-b></my-component-b>
    </section>

   <!--定义组件的内容面板：写到外面简洁些-->
    <template id="a">
        <select><option value="1">大学</option></select>
    </template>
	
   <!--定义组件的内容面板-->
    <template id="b">
        <select><option value="2">小学</option></select>
    </template>

 
    <script type="text/javascript">
        const componentA = {
            template: '#a',
            data(){
                return { }
            }
            //...
        }

        const componentB = {
            template: '#b',
            data(){
                return { }
            }
            //...
        }

        var vm = new Vue({
         el: '#app',
         components: {  //子组件在父组件中注册
          // 局部注册，my-component-a是标签名称
          'my-component-a': componentA,
          // 局部注册，my-component-b是标签名称
          'my-component-b': componentB
         }
        })
    </script>

</body> 
</html>